<!--
 * @Description: 促销商品添加
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-12 09:49:19
 * @FilePath: /yuxiuproweb/src/views/app/activity/mods/goods.vue
-->

<template>
  <div>
    <el-drawer
      :visible.sync="shows"
      :title="'促销产品'"
      :size="'64vw'"
      append-to-body
    >
      <div style="padding: 20px">
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            @click.native="getAdd()"
            icon="el-icon-circle-plus-outline"
          >
            添 加</el-button
          >
          <el-button
            @click.native="delItem()"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >批 量 删 除</el-button
          >
        </el-button-group>
        <el-table
          v-loading="loading"
          :data="list"
          @selection-change="handleSelectionChange"
          :max-height="maxHeight"
        >
          <el-table-column type="selection" width="55" align="center" />
          <template v-for="(i, index) in tableForm.item">
            <el-table-column
              :key="index"
              :prop="i.itemcode"
              :columnKey="i.itemcode"
              :label="i.itemname"
              :align="i.aligntype ? i.aligntype : 'center'"
              :width="!!i.width ? i.width : ''"
              :min-width="i.minwidth"
              :show-overflow-tooltip="i.overflow ? true : false"
              :sortable="i.sortable ? true : false"
              v-if="i.displaymark ? true : false"
            >
              <template slot-scope="scope">
                <div v-if="i.itemcode == 'isLimit'">
                  <span v-if="scope.row[i.itemcode] == 1">是</span>
                  <span v-if="scope.row[i.itemcode] == 2">否</span>
                </div>
                <span v-else>{{ scope.row[i.itemcode] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </el-drawer>
    <el-dialog
      :close-on-click-modal="false"
      :title="'添加货品'"
      :visible.sync="goodsShow"
      width="720px"
      append-to-body
    >
      <el-form ref="form" :model="goodsForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="品名" prop="clientCode">
              <el-select
                style="width: 100%"
                v-model="form.clientId"
                filterable
                placeholder="请选择品名"
                remote
                reserve-keyword
                :remote-method="getQbGoodsList"
                @change="handleGoodsChange"
              >
                <el-option
                  v-for="item in goodsList"
                  :key="item.productId"
                  :label="item.name"
                  :value="item.productId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input
                v-model="goodsForm.unit"
                placeholder="请输入单位"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品号" prop="clientCode">
              <el-input
                v-model="goodsForm.goodnum"
                placeholder="请输入品号"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="goodmodel">
              <el-input
                v-model="goodsForm.goodmodel"
                placeholder="请输入型号"
                readonly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动价格类型" prop="activitypricetype">
              <el-input
                v-model="goodsForm.activitypricetype"
                placeholder="请输入活动价格类型"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格" prop="limitnum">
              ￥{{ goodsForm.price }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动价格" prop="limitnum">
              <el-input-number
                v-model="goodsForm.activityprice"
                :min="0"
                size="small"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否限量" prop="isLimit">
              <el-switch
                v-model="goodsForm.isLimit"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="goodsForm.isLimit == 1">
            <el-form-item label="限售数量" prop="limitnumber">
              <el-input-number
                v-model="goodsForm.limitnumber"
                :min="0"
                size="small"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="goodsForm.isLimit == 1">
            <el-form-item label="可销数量" prop="salenumber">
              <el-input-number
                v-model="goodsForm.salenumber"
                :min="0"
                size="small"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitGoodsForm">确 定</el-button>
        <el-button @click="goodsShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getActivityListItem,
  addGoodsList,
  delGoodsList,
} from "@/api/app/activity";
import { getQbGoodsList } from "@/api/goods/qb";
import { tableGoodsList } from "./tablecolums.js";
import commonMix from "@/utils/mixins/common";
export default {
  components: {},
  mixins: [commonMix],
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      form: {},
      list: [],
      tableForm: tableGoodsList,
      selRows: [],
      goodsShow: false,
      goodsForm: {
        activityId: "",
        goodnum: "",
        goodname: "",
        goodmodel: "",
        unit: "",
        activitypricetype: "", //活动价格类型
        price: 0, //价格
        activityprice: 0, //活动价格
        isLimit: 2, //是否限量1是2否
        limitnumber: 0, //限售数量
        salenumber: 0, //可销售数量
      },
      rules: {},
      goodsList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  watch: {
    list: function (val, oldVal) {
      if (val == undefined) {
        this.list = [];
      }
      for (var i = 0; i < val.length; i++) {
        val[i].rownum = i;
      }
    },
  },
  async mounted() {
    this.handleUpdate();
    this.getQbGoodsList();
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      getActivityListItem(this.data.activityId).then((res) => {
        this.form = Object.assign({}, res.data);
        this.list = res.data.goodsList || [];
        this.loading = false;
      });
    },
    handleSelectionChange(selection) {
      this.selRows = selection;
    },
    /** 提交按钮 */
    submitGoodsForm() {
      // console.log("提交", this.form);
      addGoodsList(this.goodsForm).then((res) => {
        this.$modal.msgSuccess("新增成功");
        this.handleUpdate();
        this.goodsShow = false;
      });
    },
    getAdd() {
      this.goodsForm = {
        activityId: this.data.activityId,
        goodnum: "",
        goodname: "",
        goodmodel: "",
        unit: "",
        activitypricetype: "指定价格", //活动价格类型
        price: 0, //价格
        activityprice: 0, //活动价格
        isLimit: 2, //是否限量1是2否
        limitnumber: 0, //限售数量
        salenumber: 0, //可销售数量
      };
      // this.list.push(this.goodsForm)
      this.goodsShow = true;
    },
    // 删除行
    delItem() {
      var that = this;
      this.$confirm("是否确认删除，此操作不可逆, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 执行删除的方法
          var ids = [];
          for (var i = 0; i < that.selRows.length; i++) {
            var item = that.selRows[i];
            ids.push(item.id);
          }
          delGoodsList(ids).then((res) => {
            console.log(res);
            this.$modal.msgSuccess("操作成功");
            this.handleUpdate();
          });
        })
        .catch(() => {});
    },
    getQbGoodsList() {
      var queryParams = {
        pageNum: 1,
        pageSize: 20,
        data: {
          name: null,
          namenum: null,
          fabricType: null,
          type: null,
        },
      };
      getQbGoodsList(queryParams).then((response) => {
        this.goodsList = response.rows;
      });
    },
    handleGoodsChange(val) {
      console.log(val);
      // this.goodsForm
      var index = this.goodsList.findIndex((a) => a.productId == val);
      if (index != -1) {
        var item = this.goodsList[index];
        this.goodsForm.goodnum = item.namenum;
        this.goodsForm.goodname = item.name;
        this.goodsForm.goodmodel = item.productType;
        this.goodsForm.unit = item.unit;
        this.goodsForm.price = item.price;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
